mixin tip-shake({img, bg})
  -var {url: bgUrl, width: w, height: h} = images[bg]
  -var tipUrl = images[img].url

  svg.Tips(
      style=`display: inline-block; width: 100%; vertical-align: top; background-position: 0% 0%;
        background-repeat: no-repeat; background-size:100% 100%; background-attachment: scroll; 
        background-image: url("${bgUrl}");
        -webkit-tap-highlight-color:transparent;-webkit-user-select:none;line-height:0;
        font-size:0px;pointer-events:none;margin-top:-1px;`, 
      viewBox=`0 0 ${w} ${h}`
      )
    g.open
      foreignObject(x='0', y='0', width=`${w}`, height=`${h}`,)
        svg(
          style=`display: inline-block;width:100%;vertical-align: top;background-position:0% 0%;
            background-repeat:no-repeat;background-size:100%;background-attachment:scroll; 
            background-image:url("${tipUrl}");
            -webkit-tap-highlight-color:transparent;-webkit-user-select:none;`, 
          viewBox=`0 0 ${w} ${h}`)
      animateTransform.click(
        attributeName='transform', type='translate', begin='.1s', dur='1s', values='-10 0;10 0;-10 0', 
        repeatCount='indefinite', calcMode='spline', keySplines='.5 0 .5 1;0 0 1 1', keyTimes='0;.8;1')
